<template>
  <div class="container">
    <div class="p30 flex">
      <img :src="userinfo.avatar" alt="" class="avatar-img">
      <div class="userinfo flex-con">
        <div class="username">
          {{userinfo.virtualCard}}
        </div>
        <div class="userdetail">
          等级：{{userinfo.userType|userTypeName}} &nbsp;&nbsp; 积分：{{userinfo.points}}
        </div>
      </div>
      <router-link tag="div" to="/mypointscard" class="pointsbtn">积分详情</router-link>
    </div>
    <div class="panel1">
      <div class="flex">
        <div class="curpoints flex">
          <img src="../../assets/icons/usercenter/crown@2x.png" alt="" class="crown-icon">
          <div>
            当前
            <span class="points_times">{{levelSpeedInfo.custLevel}}</span>倍积分
          </div>
        </div>
        <router-link class="flex-con fz24 text-right textfff" tag="div" to="/page?token=points">
          积分加速
        </router-link>
      </div>
      <div class="flex p-1">
        <div class="label">
          本月目标积分
          <br> 汽油升数
        </div>
        <div class="flex-con text-right clearfix" v-if="levelSpeedInfo.levelValue">
          <div class="l-num" v-for="(l,index) in levelSpeedInfo.levelValue.split('|')" :key="index">{{l}}L</div>
        </div>
      </div>
      <div class="flex p-2">
        <div class="label">
          本月已积分
          <br> 汽油升数
        </div>
        <div class="flex-con text-right clearfix">
          <div class="progress-wrapper">
            <div class="num-tip" :style="'left:' + (progressWidth-0.3>0?progressWidth-0.3:0) + 'rem'">
              <img src="../../assets/icons/goods/numtip@2x.png" class="numtip-icon" alt="" >
              
              <span class="oil-count">{{oilCount}}</span>
            </div>
            <div class="progress-bar">
              <div class="progress-inner-bar" :style="'width:' + progressWidth + 'rem'"></div>
            </div>
            <div class="linetip clearfix">
              <div class="line" :class="{'line-active':step>0}"></div>
              <div class="line" :class="{'line-active':step>1}"></div>
              <div class="line" :class="{'line-active':step>2}"></div>
              <div class="line" :class="{'line-active':step>3}"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex p-3">
        <div class="label">
          次月汽油积分
          <br> 倍数
        </div>
        <div class="flex-con text-right clearfix" v-if="levelSpeedInfo.levelType">
          <div class="l-num" :key="idx" v-for="(level,idx) in levelSpeedInfo.levelType.split('|')">{{level}}倍</div>
        </div>
      </div>
      <div class="tipmsg">
        本月累计3个便利店积分+汽油积分达标=次月汽油积分加速
        <!-- <template v-if="levelSpeedInfo.oilDistance>0">
            还差
            <span class="left-l-num">{{levelSpeedInfo.oilDistance}}</span> 升汽油积分升数即可在下个月享受<span class="left-l-num">{{levelSpeedInfo.nextLevel}}</span>倍积分
        </template>
        <template v-else>
            已达标，次月享受<span class="left-l-num">{{levelSpeedInfo.nextLevel}}</span>倍积分
        </template> -->
      </div>
    </div>
    <div class="list-items">
      <router-link class="border-b list-item" tag="div" to="/alterphone" style="padding-left:0.3467rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/phoneicon@2x.png" alt="" style="width:0.72rem;height:0.7067rem;">
          <div class="flex-con input-area" style="padding-left:0.2rem;">
            {{telephone||'请输入手机号'}}
          </div>
        </div>
      </router-link>
      <label class="border-b list-item">
        <div class="flex">
          <img src="../../assets/icons/usercenter/man@2x.png" alt="" style="width:0.64rem;height:0.64rem;">
          <div class="text-right flex-con noselected input-area" style="padding-left:0.3rem;">
            <input type="text" v-model="formData.username" placeholder="请输入姓名">
          </div>
        </div>
      </label>
      <label class="border-b list-item" style="padding-left:0.3067rem;padding-top:0.4133rem;padding-bottom:0.32rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/identity@2x.png" alt="" style="width:0.9067rem;height:0.72rem;position:relative;top:0.06rem;"
          />
          <div class="text-right flex-con noselected input-area" style="padding-left:0.2rem;">
            <input type="number" v-model="formData.idcardno" :placeholder="formData.idcardno1||'请输入身份证'">
          </div>
        </div>
      </label>
      <router-link tag="div" to="car" class="border-b list-item" style="padding-left:0.1733rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/car@2x.png" alt="" style="width:1.1333rem;height:0.7867rem;margin-right:0;">
          <div style="padding-left:0.1rem;" class="label">车辆信息</div>
          <div class="text-right flex-con noselected">
            违章查办更省心
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
    </div>
    <div class="line20gray"></div>
    <div class="list-items">
      <div class="border-b list-item rel" style="padding-left:0.32rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/birth@2x.png" alt="" style="width:0.7067rem;height:0.6933rem;">
          <div style="padding-left:0.3467rem;" class="label"> {{formData.birthday||'出生年月日'}}</div>
          <div class="text-right flex-con noselected">
            <input type="date" v-model="formData.birthday" class="full-opacity">
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </div>
      <div class="border-b list-item" style="padding-left:0.32rem;padding-bottom:0.3333rem;padding-top:0.32rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/sex@2x.png" alt="" style="width:0.76rem;height:0.8133rem">
          <div style="padding-left:0.28rem;" class="label"> {{['女','男'][parseInt(formData.gender)]||'请选择性别'}}</div>
          <div class="text-right flex-con noselected">
            <select v-model="formData.gender" class="full-opacity">
              <option disabled>请选择性别</option>
              <option value="0">女</option>
              <option value="1">男</option>
            </select>
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </div>
      <div class="border-b list-item" style="padding-left:0.48rem;padding-bottom:0.3333rem;padding-top:0.32rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/love@2x.png" alt="" style="width:0.5733rem;height:0.5733rem;">
          <div style="padding-left:0.3rem;" class="label"> {{['未婚','已婚有孩','已婚无孩','其他'][parseInt(formData.marriage)]||'请选择婚姻状况'}}</div>
          <div class="text-right flex-con noselected">
            <select v-model="formData.marriage" class="full-opacity">
              <option disabled>请选择婚姻状况</option>
              <option value="0">未婚</option>
              <option value="1">已婚有孩</option>
              <option value="2">已婚无孩</option>
              <option value="3">其他</option>
            </select>
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </div>
      <div class="border-b list-item" style="padding-left:0.28rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/edu@2x.png" alt="" style="width:0.96rem;height:0.6533rem">
          <div style="padding-left:0.1333rem;" class="label">{{formData.education_background>0?educations[parseInt(formData.education_background)-1]:'请选择学历情况'}}</div>
          <div class="text-right flex-con noselected">
            <select v-model="formData.education_background" class="full-opacity">
              <option disabled>请选择学历情况</option>
              <option v-for="(edu,idx) in educations" :key="idx+1" :value="idx+1">{{edu}}</option>
            </select>
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </div>
      <label class="border-b list-item">
        <div class="flex">
          <img src="../../assets/icons/usercenter/email@2x.png" alt="" style="width:0.76rem;height:0.6133rem;">
          <div class="text-right flex-con noselected input-area">
            <input type="text" v-model="formData.email" placeholder="请输入电子邮箱">
          </div>
        </div>
      </label>
      <div class="border-b list-item" style="padding-left:0.3733rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/invoice@2x.png" alt="" style="width:0.7333rem;height:0.6933rem;">
          <div style="padding-left:0.28rem;" class="label">是否接受电子发票</div>
          <div class="text-right flex-con">
            <div class="ib">
              <mt-switch v-model="formData.is_accept_einvoice" @change="changeAcceptEinvoice"></mt-switch>
            </div>
          </div>
        </div>
      </div>
      <div class="border-b list-item" style="padding-left:0.3067rem;">
        <div class="flex">
          <img src="../../assets/icons/usercenter/pointscoupon@2x.png" alt="" style="width:0.7867rem;height:0.76rem;position:relative;top:-0.08rem;">
          <div style="padding-left:0.2667rem;" class="label">报手机号即可积分和使用电子券</div>
          <div class="text-right flex-con">
            <div class="ib">
              <mt-switch v-model="formData.is_mobile_use" @change="changeMobileUse"></mt-switch>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="line20gray"></div>
    <div class="list-items">
      <router-link class="border-b list-item" tag="div" style="padding-left:0.4233rem;padding-top:0.28rem" to="/carlicence">
        <div class="flex">
          <img src="../../assets/icons/usercenter/carpay@2x.png" alt="" style="width:0.56rem;height:0.56rem;margin-right:0.1rem;">
          <div style="padding-left:0.28rem;" class="label">车牌付支付</div>
          <div class="text-right flex-con noselected">
            车牌付更快速
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt" />
        </div>
      </router-link>
      <router-link class="border-b list-item" tag="div" style="padding-left:0.4233rem;padding-top:0.28rem" to="/invoicemanage">
        <div class="flex">
          <img src="../../assets/icons/usercenter/invoiceinfo@2x.png" alt="" style="width:0.56rem;height:0.56rem;margin-right:0.1rem;">
          <div style="padding-left:0.28rem;" class="label">发票抬头管理</div>
          <div class="text-right flex-con noselected">
            自助开票更省事
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt" />
        </div>
      </router-link>
     
      <router-link class="border-b list-item" tag="div" style="padding-left:0.3333rem;padding-top:0.28rem" to="/job">
        <div class="flex">
          <img src="../../assets/icons/usercenter/job@2x.png" alt="" style="width:0.7467rem;height:0.8rem;">
          <div style="padding-left:0.28rem;" class="label">职业信息管理</div>
          <div class="text-right flex-con noselected">
            好礼推荐更贴心
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt" />
        </div>
      </router-link>
      <router-link class="border-b list-item" style="padding-left:0.3733rem;" tag="div" to="/addrmgr">
        <div class="flex">
          <img src="../../assets/icons/usercenter/address@2x.png" alt="" style="width:0.6533rem;height:0.7067rem;">
          <div style="padding-left:0.3333rem;" class="label">地址信息管理</div>
          <div class="text-right flex-con noselected">
            购买商品更便利
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
      <router-link class="border-b list-item" style="padding-left:0.3067rem;" tag="div" to="/paycar">
        <div class="flex">
          <img src="../../assets/icons/usercenter/bankcard@2x.png" alt="" style="width:0.8267rem;height:0.5333rem;">
          <div style="padding-left:0.24rem;" class="label">绑定银行卡</div>
          <div class="text-right flex-con noselected">
            自动积分更便捷
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
      <router-link class="list-item border-b" style="padding-left:0.36rem;" tag="div" to="/bindsolidcard">
        <div class="flex">
          <img src="../../assets/icons/usercenter/pointsbank@2x.png" alt="" style="width:0.7333rem;height:0.6667rem;">
          <div style="padding-left:0.28rem;" class="label">绑定积分实体卡</div>
          <div class="text-right flex-con noselected">
            会员资料二合一
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
      <router-link class="list-item border-b" style="padding-left:0.3733rem;" tag="div" to="/findsolidcard">
        <div class="flex">
          <img src="../../assets/icons/usercenter/findpointscard@2x.png" alt="" style="width:0.72rem;height:0.76rem;">
          <div style="padding-left:0.2667rem;" class="label">找回积分实体卡</div>
          <div class="text-right flex-con noselected">
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
      <router-link class="list-item" style="padding-left:0.4733rem;" tag="div" to="/page?token=user">
        <div class="flex">
          <img src="../../assets/icons/usercenter/userinfo@2x.png" alt="" style="width:0.5733rem;height:0.48rem;">
          <div style="padding-left:0.3267rem;" class="label">会员说明</div>
          <div class="text-right flex-con noselected">
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt">
        </div>
      </router-link>
    </div>
    <div class="savebtn-before">
    </div>
    <div class="savebtn" @click="doSubmit">
      保存
    </div>
  </div>
</template>
<script>
import { identityCodeValid, isEmail } from "../../utils/common";
import { stringTypeAnnotation } from "babel-types";
export default {
  data() {
    return {
      userinfo: {},
      oilCount: 0,
      step: 0,
      progressWidth: 0,
      telephone: "",
      formData: {
        birthday: "",
        marriage: "",
        education_background: "",
        email: "",
        gender: "",
        is_mobile_use: false,
        is_accept_einvoice: false
      },
      levelSpeedInfo: {},
      educations: [
        "初中及以下",
        "高中/中技/中专",
        "大专",
        "本科",
        "硕士",
        "博士"
      ]
    };
  },
  created() {
    this.$get("/api/user/getLevelSpeedInfo").then(res => {
      this.levelSpeedInfo = res || {};
      //progressWidth
      let oilCount = parseFloat(res.oilCount);
      this.oilCount = oilCount;
      let levelValue = res.levelValue;
      let parts = levelValue.split("|");
      let lastpart = parseFloat(parts[parts.length - 1]);
      let step = 0;
      if (oilCount > 0) {
        step++;
      }
      let prelon = 0,
        i = 0;
      for (i = 0; i < parts.length; i++) {
        let lon = parseFloat(parts[i]);
        if (oilCount > lon) {
          step++;
          prelon = lon;
        } else {
          break;
        }
      }
      this.step = step;
      if (step >= 4) {
        if (oilCount > lastpart) {
          this.progressWidth = 5.64;
        } else {
          this.progressWidth = 1.75 * 3 + 0.03;
        }
      } else if (step >= 3) {
        this.progressWidth =
          1.75 * 2 +
          0.03 +
          (oilCount - prelon) / (parts[i] - parts[i - 1]) * 1.75;
      } else if (step >= 2) {
        this.progressWidth =
          1.75 * 1 +
          0.03 +
          (oilCount - prelon) / (parts[i] - parts[i - 1]) * 1.75;
      } else if (step >= 1) {
        this.progressWidth = 0.03 + oilCount / parts[i] * 1.75;
      }
      console.log(step);
    });
    this.$get("/api/user/getUserInfo").then(res => {
      this.userinfo = res;
      this.formData.username = res.username;
      this.formData.idcardno1 = res.idcardno;
      this.formData.email = res.email;
      this.formData.gender = res.gender;
      this.formData.marriage = res.marriage;
      this.formData.education_background = res.education_background;
      this.formData.is_accept_einvoice = res.is_accept_einvoice > 0;
      this.formData.is_mobile_use = res.is_mobile_use > 0;
      this.formData.invoice = res.invoice;
      this.telephone = res.telephone;
      if (res.birthday) {
        this.formData.birthday = this.parse2date(res.birthday);
      }
    });
  },
  methods: {
    changeAcceptEinvoice() {
      if (!this.formData.invoice) {
        if (this.formData.is_accept_einvoice) {
          setTimeout(_ => {
            this.formData.is_accept_einvoice = false;
          }, 0);
          this.$toast("请先填写发票抬头信息");
          return;
        }
      }

      this.$post("/api/user/set_field_value", {
        field: "is_accept_einvoice",
        value: this.formData.is_accept_einvoice
      }).then(_ => {
        if (this.formData.is_accept_einvoice) {
          this.$toast("修改成功，已为您成功开通自动开票服务");
        } else {
          this.$toast("修改成功，已为您取消开通自动开票服务");
        }
      });
    },
    changeMobileUse() {
      if (this.formData.is_mobile_use == 1) {
        this.$confirm(
          "请确定是否同意其他人和您都可以通过报您的手机号码使用您的电子券和进行积分",
          "提示"
        )
          .then(_ => {
            this.$post("/api/user/set_field_value", {
              field: "is_mobile_use",
              value: this.formData.is_mobile_use
            }).then(_ => {
              this.$toast("已为您启用通过手机号积分或使用电子券功能");
            });
          })
          .catch(_ => {
            setTimeout(_ => {
              this.formData.is_mobile_use = false;
            });
          });
      } else {
        this.$post("/api/user/set_field_value", {
          field: "is_mobile_use",
          value: this.formData.is_mobile_use
        }).then(_ => {
          this.$toast("已禁用通过手机号积分或使用电子券功能");
        });
      }
    },
    doSubmit() {
     
      if (this.$assert("isEmpty", this.formData.username, "请输入姓名")) {
        return;
      }
      if (
        !this.formData.idcardno1 &&
        this.$assert("isEmpty", this.formData.idcardno, "请输入身份证")
      ) {
        return;
      }
      if (this.formData.email.trim().length > 0) {
        if (!isEmail(this.formData.email)) {
          this.$toast("请输入正确的邮箱地址");
          return;
        }
      }

      if (
        this.formData.idcardno &&
        this.formData.idcardno.trim() &&
        !identityCodeValid(this.formData.idcardno)
      ) {
        this.$toast("请输入正确的身份证号码");
        return;
      }
      this.showLoading();
      this.$post("/api/user/saveUserInfo", this.formData)
        .then(res => {
          this.$toast("保存成功");
          this.hideLoading();
        })
        .catch(el => {
          this.hideLoading();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.savebtn-before {
  height: 3.16rem;
}

.avatar-img {
  border-radius: 50%;
}

.savebtn {
  height: 1.1467rem;
  line-height: 1.1467rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff2a2a;

  text-align: center;
  color: #fff;
  font-size: 0.4267rem;
}

.avatar-img {
  width: 1.6533rem;
  height: 1.6rem;
}

.line20gray {
  height: 0.2667rem;
  background-color: #f6f6f6;
}

.curpoints {
  font-size: 0.32rem;
  color: #5d3d00;
  padding: 0.16rem 0.28rem;
  border-radius: 0.2933rem;
  background-color: #fff;
  .points_times {
    font-size: 0.3733rem;
    color: #ff0000;
  }
}

.panel1 {
  padding-left: 0.4133rem;
  padding-top: 0.4rem;
  padding-right: 0.4rem;
}

.crown-icon {
  width: 0.6rem;
  height: 0.4533rem;
  margin-right: 0.0667rem;
}

.panel1 {
  height: 5.8133rem;
  background-image: url("../../assets/icons/usercenter/bg1@2x.png");
  background-repeat: no-repeat;
  font-size: 0.2933rem;
  color: #fff;
  line-height: 0.32rem;

  background-size: 100% 100%;
  background-position: left top;
}

.userinfo {
  padding-left: 0.2133rem;
}

.username {
  font-size: 0.48rem;
  color: #008d3e;
  padding-bottom: 0.2rem;
}

.userdetail {
  font-size: 0.32rem;
  color: #222222;
}

.pointsbtn {
  border-radius: 0.2667rem;
  width: 1.8533rem;
  height: 0.5867rem;
  line-height: 0.56rem;
  border: solid 1px #e30421;
  font-size: 0.32rem;
  color: #e30421;
  text-align: center;
}

.progress-wrapper {
  width: 5.64rem;
  position: relative;
  display: inline-block;
  .linetip {
    position: absolute;
    top: -0.22rem;
    .line {
      width: 0.03rem;
      height: 0.5733rem;
      background-color: white;
      float: left;
      margin-left: 1.72rem;
    }
    .line:first-child {
      margin-left: 0;
    }
    .line-active {
      background-color: #ffef01;
    }
  }
  .progress-bar {
    width: 100%;
    height: 0.16rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    overflow: hidden;
    background-color: #ffffff;
    .progress-inner-bar {
      height: 0.16rem;
      background-color: #ffef01;
    }
  }
}

.l-num {
  font-size: 0.32rem;
  display: inline;
  margin-left: 0.9733rem;
}

.p-1 {
  padding-top: 0.76rem;
}

.p-2 {
  padding-top: 0.4533rem;
}

.p-3 {
  padding-top: 0.4533rem;
}

.tipmsg {
  text-align: right;
  color: #fff000;
  font-size: 0.2667rem;
  padding-top: 0.4533rem;
}

.left-l-num {
  color: #ffffff;
  font-size: 0.4rem;
}

.list-items {
  margin-top: 0.08rem;
  width: 100%;
  overflow: hidden;
}

.list-items:first-child {
  margin-top: 0.2533rem;
}

.list-item {
  padding: 0.4rem;
  position: relative;
  display: block;
  font-size: 0.4rem;
  color: #222;
  .input-area {
    padding-right: 0.52rem;
    padding-left: 0.24rem;
  }

  input {
    font-size: 0.38rem;
    outline: none;
    display: block;
    width: 100%;
    -webkit-appearance: none;
  }
  .label {
    font-size: 0.4rem;
    color: #666666;
  }
  .gt {
    margin-left: 0.3333rem;
  }
  .noselected {
    color: rgba(187, 187, 187, 0.57);
  }
}

.full-opacity {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  opacity: 0;
}

.num-tip {
  position: absolute;
  top: -0.66rem;
  width: 0.6rem;
  height: 0.3733rem;
  img {
    width: 0.6rem;
    height: 0.3733rem;
  }
  .oil-count {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    text-align: center;
    color: #e30421;
    font-size: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
